<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 网页多媒体</title>
</head>
<body>
<div>
    <audio id="audio"
           src="http://dl.stream.qqmusic.qq.com/C400002VfFmF1fAa9S.m4a?vkey=2418A495658F0BFC2D34A91CF3B8C53D628B60028979277DC9BA826EEB4A727326C2D3BE654EAA9989ADD32AB1E2B05D5D247C24CEF06395&guid=4121992680&uin=0&fromtag=66"
           controls="controls"></audio>
    <button id="btn-play">播放</button>
    <button id="btn-pause">暂停</button>
    <button id="btn-stop">暂停</button>
</div>

<div>
    <video class="top-big-video" id="topBigVideo" autoplay="" loop="">
        <source src="//ossweb-img.qq.com/images/lol/v2/banner/big-v6.webm" type="video/webm">
        <source src="//ossweb-img.qq.com/images/lol/v2/banner/big-v6.mp4" type="video/mp4">
    </video>
<script>
    var audio = document.getElementById('audio');
    var play = document.getElementById('btn-play');
    var pause = document.getElementById('btn-pause');
    var stop = document.getElementById('btn-stop');
    play.addEventListener('click', function () {
        audio.play();
    });

    pause.addEventListener('click', function () {
        audio.pause();
    });

    stop.addEventListener('click', function () {
        audio.stop();
    });
</script>
</div>
</body>
</html>